<!-- eslint-disable no-console -->
<script lang="ts" setup>
import type { DictApi } from '#/api';

import { reactive, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { message } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import { DictResp } from '#/api';
import { baseRequestClient } from '#/api/request';

const sys_yes_no = reactive<DictApi.SelectOption[]>([]);
const mes_mainten_type = reactive<DictApi.SelectOption[]>([]);
DictResp(['sys_yes_no', 'mes_mainten_type']).then((res) => {
  // 将两个数组合并
  if (res.mes_mainten_type) {
    mes_mainten_type.push(...res.mes_mainten_type);
  }
  if (res.sys_yes_no) {
    sys_yes_no.push(...res.sys_yes_no);
  }
});
// 自动生成编码
const getAutoCode = () =>
  baseRequestClient.get<any>('/system/autocode/get/ITEM_CODE');
// const switchValue = ref('');
// const formRef = ref();
const [BaseForm, baseFormApi] = useVbenForm({
  submitButtonOptions: { show: false }, // 隐藏提交按钮
  resetButtonOptions: { show: false }, // 隐藏重置按钮
  // wrapperClass: 'grid-cols-2',
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  // 提交函数
  handleSubmit: onSubmit,
  // 垂直布局，label和input在不同行，值为vertical
  // 水平布局，label和input在同一行
  layout: 'horizontal',
  schema: [
    {
      component: 'Input',
      fieldName: 'itemCode',
      formItemClass: 'w-[300px] ',
      rules: 'required',
      label: '物料编码',
    },
    {
      component: 'Switch',
      fieldName: 'switch',
      formItemClass: 'w-[160px] mt-[-62px] ml-[265px]',
      label: '自动生成',
      componentProps: {
        onChange: async (e: boolean) => {
          if (e) {
            const res = await getAutoCode();
            baseFormApi.setFieldValue('itemCode', res.data); // 直接更新
          } else {
            baseFormApi.setFieldValue('itemCode', '');
          }
        },
      },
    },

    {
      component: 'Input',
      rules: 'required',
      formItemClass: 'w-[480px]',
      componentProps: {
        placeholder: '请输入物料名称',
      },
      fieldName: 'itemName',
      label: '物料名称',
    },
    {
      component: 'Input',
      formItemClass: ' w-[480px]',
      componentProps: {
        placeholder: '请输入规格型号',
        class: 'h-[80px]',
      },
      fieldName: 'specification',
      label: '规格型号',
    },
    {
      component: 'Select',
      rules: 'required',
      fieldName: 'unitName',
      formItemClass: 'w-[350px]',
      label: '单位',
    },
    {
      component: 'Select',
      fieldName: 'unitName',
      rules: 'required',
      formItemClass: 'w-[480px]',
      label: '物料/产品分类',
      componentProps: {
        allowClear: true,
        options: mes_mainten_type,
        placeholder: '请选择所属分类',
      },
    },
    {
      component: 'Checkbox',
      fieldName: 'unitName',
      formItemClass: ' mt-[-59px] ml-[490px]',
      label: '高价值/易被盗物品',
      labelWidth: 120,
    },
    {
      component: 'RadioGroup',
      rules: 'required',
      componentProps: {
        allowClear: true,
        options: sys_yes_no,
        placeholder: '是否启用',
      },
      fieldName: 'enableFlag',
      label: '是否启用',
    },
    {
      component: 'Switch',
      formItemClass: 'w-[160px] mt-[-48px] ml-[260px]',
      componentProps: {
        class: 'w-auto',
      },
      fieldName: 'batchFlag',
      label: '批次管理',
    },
    {
      component: 'RadioGroup',
      formItemClass: ' mt-[-48px] ml-[460px]',
      componentProps: {
        allowClear: true,
        options: sys_yes_no,
      },
      fieldName: 'safeStockFlag',
      label: '安全库存',
    },
    {
      component: 'Input',
      formItemClass: 'w-full',
      componentProps: {
        placeholder: '请输入备注',
        class: 'h-[50px]',
      },
      fieldName: 'note',
      label: '备注',
    },
  ],
  wrapperClass: 'grid-cols-1',
});
const data = ref();
const [Modal, modalApi] = useVbenModal({
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      data.value = modalApi.getData<Record<string, any>>();
      console.log(data.value);
      if (data.value) {
        baseFormApi.setValues(data.value);
      }
    }
  },
});

function onSubmit(values: Record<string, any>) {
  message.success({
    content: `form values: ${JSON.stringify(values)}`,
  });
}
</script>

<template>
  <Modal class="mt-5">
    <BaseForm />
  </Modal>
</template>
